
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型-卡片布局</title>
		<style>
			*{
				font-family: "微软雅黑";
				color: #f5f5f5;
				margin: 0;
			}
			.product_card{
				border: 1px solid transparent;
				width: 260px;
				padding: 10px 10px 60px 10px;
				overflow: hidden;
				box-shadow: 5px 5px 1px #f5f5f5;
				
			}
			img{
				border-radius: 30px;
				margin: 10px 10px 60px 10px;
				
			}
			h3{
				color: black;
				text-align: center;
			}
			h3+p{
				color: red;
				font-size: 20px;
				text-align: center;
			}
			h3+p~p{
				color: #f5f5f5;
			}
		</style>
	</head>
	<body>
		<!-- 网页 1html 结构 【原生图分析】 -->
		<div class="product_card">
			<img src="img/小米su7车模-大图_爱给网_aigei_com.jpg" 
			alt="su7" width="240px" height="350px">
			<h3>小米su7</h3>
			<p>￥279999.90</p>
			<p>已有<span> 10万+</span>评价</p>
		</div>
	</body>
</html>